@charset "utf-8";
// Copyright 2019 Google Inc. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

:root {
    --font-color-dark: #333333;
    --font-color-grey: #c9c9c9;
    --font-color-light: #fafafa;
    --search-input-light: #ffffff;
    --search-input-dark: #464646;
}

[data-theme=light] {
    --background-color: linear-gradient(90deg, rgba(249,249,249,1) 11%, rgba(241,241,241,1) 100%);
    --default-font-color: var(--font-color-dark);
    --default-link-color: var(--font-color-dark);
    --default-title-font-color: var(--font-color-dark);
    --navbar-background: #0070bd;
    --navbar-font-color: var(--font-color-light);
    --tabs-link-color: var(--font-color-dark);
    --tabs-link-hover-color: var(--font-color-dark);
    --tabs-link-active-color: var(--font-color-dark);
    --tabs-link-active-border-bottom-color: var(--font-color-dark);
    --tabs-link-hover-border-bottom-color: var(--font-color-dark);
    --tabs-border-bottom-color: var(--font-color-light);
    --card-background-color: hsl(0, 0%, 100%);
    --card-font-color: hsl(0, 0%, 29%);
    --card-accent-background-color: #f5f5f5;
    --card-accent-font-color: var(--font-color-dark);
    --search-input-home: var(--search-input-light);
    --search-input-explore: #f9f9f9;
    --search-input-font-color: var(--font-color-dark);
    --button-greyscale: grayscale(0%);
    --timeline-name-column-background: #f1f1f1;
    --timeline-name-column-font-color: #999999;
    --table-cell-border-color: #f5f5f5;
    --time-bubble-background-color: #f5f5f5;
    --time-bubble-font-color: #666666;
    --content-list-hover-color: #fcfcfc;
    --content-list-border-color: #EEEEEE;
    --login-page-background-color: var(--navbar-background);
    --card-title-font-color: var(--font-color-dark);
    --card-header-border-color: #f5f5f5;
    --button-font-color: var(--font-color-dark);
    --form-label-font-color: var(--font-color-dark);
    --message-header-background-color: rgba(229, 229, 229, 0.84);
    --message-header-font-color: #333333;
    --message-background-color: #f9f9f9;
    --message-body-color: var(--font-color-dark);
    --markdown-body-font-color: var(--font-color-dark);
    --spinner-color: #333333;
}

[data-theme=dark] {
    --background-color: #2d2d2d;
    --default-font-color: var(--font-color-light);
    --default-link-color: var(--font-color-light);
    --default-title-font-color: var(--font-color-light);
    --navbar-background: #242424;
    --navbar-font-color: var(--font-color-light);
    --tabs-link-color: var(--font-color-light);
    --tabs-link-hover-color: var(--font-color-light);
    --tabs-link-active-color: var(--font-color-light);
    --tabs-link-active-border-bottom-color: var(--font-color-light);
    --tabs-link-hover-border-bottom-color: var(--font-color-light);
    --tabs-border-bottom-color: var(--font-color-dark);
    --card-background-color: #545454;
    --card-font-color: #fafafa;
    --card-accent-background-color: #494949;
    --card-accent-font-color: var(--font-color-light);
    --search-input-home: var(--search-input-dark);
    --search-input-explore: var(--search-input-dark);
    --search-input-font-color: var(--font-color-light);
    --button-greyscale: grayscale(25%);
    --timeline-name-column-background: #666666;
    --timeline-name-column-font-color: #d9d9d9;
    --table-background-color: #424242;
    --table-head-cell-color: #fafafa;
    --table-color: #fafafa;
    --table-cell-border-color: #818181;
    --time-bubble-background-color: #666666;
    --time-bubble-font-color: #d9d9d9;
    --content-list-hover-color: #696969;
    --content-list-border-color: #696969;
    --login-page-background-color: var(--background-color);
    --navbar-item-link-color: #fafafa;
    --card-title-font-color: var(--font-color-light);
    --card-header-border-color: #848484;
    --button-font-color: var(--font-color-light);
    --form-label-font-color: var(--font-color-dark);
    --message-header-background-color: var(--background-color);
    --message-header-font-color: var(--font-color-light);
    --message-background-color: #363636;
    --message-body-color: var(--font-color-light);
    --markdown-body-font-color: var(--font-color-light);
    --spinner-color: #ffffff;
}

// Customize Bulma
$family-primary: Arial, sans-serif;
$body-size: 15px;
$card-shadow: 0 0 1px rgba(0,0,0,0.15);
$card-header-shadow: none;
$section-padding: 15px 15px 0 15px;
$info: #0070bd;
$success: #41ad49;
$table-cell-padding: 10px;

$box-shadow: 0px;
$box-color: var(--default-font-color);
$box-background-color: var(--card-background-color);

// Support light/dark themes
$tabs-link-color: var(--tabs-link-color);
$tabs-link-hover-color: var(--tabs-link-hover-color);
$tabs-link-active-color: var(--tabs-link-active-color);
$tabs-link-active-border-bottom-color: var(--tabs-link-active-border-bottom-color);
$tabs-link-hover-border-bottom-color: var(--tabs-link-hover-border-bottom-color);
$tabs-border-bottom-color: var(--tabs-border-bottom-color);
$button-text-color: var(--button-font-color);
$button-text-hover-color: var(--button-font-color);
$button-text-hover-background-color: transparent;
$table-background-color: var(--table-background-color);
$table-head-cell-color: var(--table-head-cell-color);
$table-cell-border: 1px solid var(--table-cell-border-color);
$table-color: var(--table-color);
$title-color: var(--default-title-font-color);
$navbar-item-color: var(--navbar-item-link-color);
$label-color: var(--form-label-font-color);
$message-header-background-color: var(--message-header-background-color);
$message-header-color: var(--message-header-font-color);
$message-background-color: var(--message-background-color);
$message-body-color: var(--message-body-color);


// Font Awesome
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";

// Import Bulma CSS
@import '../../node_modules/bulma/bulma';

// Global CSS
html, body {
    height: 100%;
    overflow: auto;
}

body {
    background: var(--background-color);
    color: var(--default-font-color);
}

.login-page {
    background: var(--login-page-background-color);
    color: var(--default-font-color);
}

.card {
    border-radius: 5px;
    background-color: var(--card-background-color);
    color: var(--card-font-color);
}

.card-header {
    border-bottom: 1px solid var(--card-header-border-color);
}

.card-accent-background {
    background-color: var(--card-accent-background-color);
    color: var(--card-accent-font-color);
}

.card-header-title {
    color: var(--card-title-font-color);
}

.ts-timeline-color-box {
    width:43px;
    height:43px;
    margin-top: 2px;
    margin-right: 10px;
    border-radius: 4px;
}

ul.content-list {
    list-style: none;
}

ul.content-list>li {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--content-list-border-color);
    display: block;
    margin: 0;
}

ul.content-list>li:hover {
    background: var(--content-list-hover-color);
}

ul.content-list>li:last-child { border-bottom: none; }

.ts-search-input {
    outline: none;
    border: none;
    font-size: 1.2em;
    border-radius: 0 5px 5px 0;
    padding: 25px;
    height: 34px;
    background: var(--search-input-explore);
    color: var(--search-input-font-color);
    width: 100%;
}

.ts-home-input {
    outline: none;
    border: none;
    border-radius: 5px;
    background: var(--search-input-explore);
    color: var(--search-input-font-color);
    padding: 13px;
    width: 50%;
}

.button.ts-search-dropdown {
    outline: 0;
    border: none;
    border-radius: 5px 0 0 5px;
    padding: 25px;
    background: var(--card-accent-background-color);
    color: var(--search-input-font-color);
}

.ts-home-search-input {
    outline: none;
    border: none;
    font-size: 1.2em;
    border-radius: 5px;
    padding: 15px;
    background: var(--search-input-home);
    color: var(--search-input-font-color);
    width: 100%;
}

a, a:hover {
    color: var(--link-color);
}

.button {
    filter: var(--button-greyscale);
}

.ts-dropdown-button, .ts-dropdown-button:hover {
    color: var(--button-font-color)
}

.navbar {
    background: var(--navbar-background);
    color: var(--navbar-font-color);
}

.ts-timeline-name-column-color {
  background: var(--timeline-name-column-background);
  color: var(--timeline-name-column-font-color);
}

// Time bubble
.ts-time-bubble-color {
  background: var(--time-bubble-background-color)
}

.ts-time-bubble-color h5 {
  color: var(--time-bubble-font-color);
}

.ts-time-bubble-vertical-line-color {
  background: var(--time-bubble-background-color);
}

.ts-markdown-body-color {
    color: var(--markdown-body-font-color);
}

.button.is-small {
    border-radius: 4px;
}

.pagination-previous, .pagination-next, .pagination-link {
    color: var(--default-font-color);
}
